<!--编辑-->
<template>
  <div>
    <el-dialog
      title="结算服务费"
      :visible.sync="centerDialogVisible"
      width="800px"
      @close="cancel"
      center
    >
      <el-form
        size="small"
        :model="editForm"
        label-position="right"
        :rules="editFormRules"
        label-width="120px"
        ref="form"
        class="demo-form-inline"
      >
        <el-form-item label="结算方式" prop="stlmtWay">
          <el-select v-model="editForm.stlmtWay" clearable placeholder="请选择">
            <el-option
              v-for="item in settlementMethodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--带过来-->
        <el-form-item label="服务费总额">
          <el-input
            v-model="detailInfo.servTotalAmount"
            placeholder="请输入服务费总额"
          ></el-input>
        </el-form-item>
        <el-form-item label="已结算服务费">
          <el-input
            disabled
            v-model="detailInfo.servSettledAmount"
            placeholder="请输入已结算服务费"
          ></el-input>
        </el-form-item>
        <el-form-item label="本次结算服务费">
          <el-input
            v-model="editForm.stlmtAmount"
            placeholder="请输入已结算服务费"
          ></el-input>
        </el-form-item>

        <el-form-item label="预结算服务费">
          <el-input
            disabled
            v-model="editForm.balanceAmount"
            placeholder="请输入预结算服务费"
          ></el-input>
        </el-form-item>
        <div>
          <el-form-item label="结算凭证" prop="stlmtVoucher">
            <single-upload
              uploadType="2"
              bgcColor="#eee"
              @uploadSucces="uploadSucces"
              v-model="editForm.stlmtVoucher"
            >
              <div class="uploadPic" v-if="editForm.stlmtVoucher.length > 0">
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>
          </el-form-item>
        </div>

        <el-form-item label="备注">
          <el-input
            v-model="editForm.note"
            placeholder="请输入备注内容"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()">修 改</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import singleUpload from "@/components/Upload/singleUpload.vue";
import { addCommission } from "@/api/commission";
export default {
  components: { singleUpload },
  props: {
    settlementMethodList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    show: {
      handler(val) {
        this.centerDialogVisible = val;
      }
    },
    "editForm.stlmtAmount": {
      handler(val) {
        if (!val) return (this.editForm.balanceAmount = "");
        if (
          parseFloat(val) >
          parseFloat(this.detailInfo.servTotalAmount) -
            parseFloat(this.detailInfo.servSettledAmount)
        ) {
          this.$message.error("结算服务费不能大于服务费总额");
          return (this.editForm.balanceAmount = "");
        } else {
          this.editForm.balanceAmount =
            parseFloat(this.detailInfo.servTotalAmount) -
            (parseFloat(val) + parseFloat(this.detailInfo.servSettledAmount));
        }
      }
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      stateWayList: [],
      editForm: {
        stlmtWay: "",
        stlmtAmount: "",
        balanceAmount: "",
        stlmtVoucher: [],
        note: ""
      },
      detailInfo: {},
      editFormRules: {
        stlmtWay: [
          { required: true, message: "请选择结算方式", trigger: "blur" }
        ],
        stlmtVoucher: [
          { required: true, message: "请上传结算凭证", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    opendialog(v) {
      this.detailInfo = v;
      this.centerDialogVisible = true;
      this.editForm.balanceAmount =
        parseFloat(this.detailInfo.servTotalAmount) -
        parseFloat(this.detailInfo.servSettledAmount);
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.editForm);
          let params = Object.assign({}, this.editForm);
          params.stlmtVoucher = params.stlmtVoucher.join(",");
          params.stlmtBillId = this.detailInfo.id;
          addCommission(params).then(res => {
            this.editForm = {
              stlmtWay: "",
              stlmtAmount: "",
              balanceAmount: "",
              stlmtVoucher: [],
              note: ""
            };
            this.$emit("cancel", false);
          });
        }
      });
    },
    uploadSucces() {
      this.$refs.form.validateField("stlmtVoucher");
    },
    cancel() {
      this.centerDialogVisible = false;
      this.$emit("cancel", false);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select,
/deep/ .el-input {
  width: 540px;
}
/deep/ .el-dialog__body {
  padding-left: 60px;
}

.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
